<template>
	<view class="history-container">
		<!-- 活动列表 -->
		<scroll-view scroll-y class="activity-scroll" 
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
		>
			<view class="activity-item" v-for="activity in activityList" :key="activity.id">
				<!-- 用户信息 -->
				<view class="user-info">
					<image class="avatar" :src="activity.sysUser.avatar || '/static/avatars/default-avatar.jpg'" mode="aspectFill"></image>
					<text class="nickname">{{ activity.sysUser.nickName }}</text>
				</view>
				
				<!-- 活动信息 -->
				<view class="activity-info" @tap="goToDetail(activity.id)">
					<view class="activity-title">{{ activity.title }}</view>
					<view class="activity-meta">
						<text class="time">{{ activity.activityTime }}</text>
						<text class="location">{{ activity.location }}</text>
					</view>
					<view class="activity-stats">
						<text class="stat signup" @tap.stop="goToDetail(activity.id)">
							报名 {{ activity.signupUserCount }}/{{ activity.maxPeople }}
						</text>
						<text class="stat comment" @tap.stop="goToComment(activity.id)">
							留言({{ activity.commentCount || 0 }})
						</text>
						<text class="stat data" @tap.stop="goToData(activity.id)">数据</text>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="activityList.length === 0">
				<image src="/static/images/empty-activity.png" mode="aspectFit"></image>
				<text>暂无历史活动</text>
			</view>

			<!-- 加载更多 -->
			<view class="loading-more" v-if="activityList.length > 0">
				<text v-if="hasMore">加载中...</text>
				<text v-else>没有更多了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { listActivityByUserId } from '@/api/youqiu/activity'

export default {
	data() {
		return {
			activityList: [],
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				orderByColumn: 'activity_time',
				isAsc: 'desc'
			},
			hasMore: true,
			refreshing: false,
			userId: ''
		}
	},
	
	onLoad() {
		const storage_data = uni.getStorageSync('storage_data')
		if (storage_data && storage_data.vuex_user_info) {
			this.userId = storage_data.vuex_user_info.userId
			this.getActivityList()
		}
	},
	
	methods: {
		async getActivityList() {
			try {
				const res = await listActivityByUserId({
					...this.queryParams,
					userId: this.userId
				})
				
				if (res.code === 200) {
					const { rows, total } = res
					if (this.queryParams.pageNum === 1) {
						this.activityList = rows
					} else {
						this.activityList = [...this.activityList, ...rows]
					}
					this.hasMore = this.activityList.length < total
				}
			} catch (error) {
				console.error('获取活动列表失败:', error)
				uni.showToast({
					title: '获取活动列表失败',
					icon: 'none'
				})
			}
		},
		
		// 加载更多
		loadMore() {
			if (!this.hasMore) return
			this.queryParams.pageNum++
			this.getActivityList()
		},
		
		// 下拉刷新
		async onRefresh() {
			this.refreshing = true
			this.queryParams.pageNum = 1
			await this.getActivityList()
			this.refreshing = false
		},
		
		goToDetail(activityId) {
			uni.navigateTo({
				url: `/pages/activity/register?id=${activityId}`
			})
		},
		
		goToComment(activityId) {
			uni.navigateTo({
				url: `/pages/activity/comment?id=${activityId}`
			})
		},
		
		goToData(activityId) {
			uni.navigateTo({
				url: `/pages/activity/data?id=${activityId}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.history-container {
	min-height: 100vh;
	background: #f5f5f5;
	
	.activity-scroll {
		height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
	}
	
	.activity-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.user-info {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			
			.nickname {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}
		}
		
		.activity-info {
			.activity-title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 16rpx;
			}
			
			.activity-meta {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				font-size: 26rpx;
				color: #666;
				
				.time {
					margin-right: 20rpx;
				}
			}
			
			.activity-stats {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;
				
				.stat {
					margin-right: 20rpx;
				}
			}
		}
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 0;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.loading-more {
		text-align: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #999;
	}
}

.activity-stats {
	.stat {
		&.signup,
		&.comment,
		&.data {
			padding: 4rpx 16rpx;
			border-radius: 4rpx;
			background: #f5f5f5;
			
			&:active {
				opacity: 0.7;
			}
		}
	}
}
</style> 